<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小猿框架</title>
  </head>
  <body>
    <div class="ape-container">
      <div class="ape-header"></div>
      <div class="ape-body">
        <form class="ape-form form">
          <div class="title">新增数据表</div>
          <div class="ape-form-item" label="后台页面" width="60px"></div>
          <div class="ape-form-item" label="输出路径" width="60px">
            <input
              class="ape-input"
              type="text"
              v-module="table.filed"
              placeholder="请输入输出路径"
            />
          </div>
          <div class="ape-form-item" label="数据库表" width="60px"></div>
          <div class="ape-form-item">
            <table class="outside">
              <thead>
                <th>字段</th>
                <th>类型</th>
                <th>长度</th>
                <th>小数点</th>
                <th>非空</th>
                <th>主键</th>
                <th>默认</th>
                <th>注释</th>
                <th>字符集</th>
                <th>排序规则</th>
                <th>操作</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input
                      class="ape-input"
                      type="text"
                      v-module="outputPath"
                      placeholder="请输入"
                    />
                  </td>
                  <td>
                    <input
                      class="ape-input"
                      type="text"
                      v-module="outputPath"
                      placeholder="请输入"
                    />
                  </td>
                  <td>
                    <input
                      class="ape-input"
                      type="text"
                      v-module="outputPath"
                      placeholder="请输入"
                    />
                  </td>
                  <td>
                    <input
                      class="ape-input"
                      type="text"
                      v-module="outputPath"
                      placeholder="请输入"
                    />
                  </td>
                  <td>
                    <input
                      class="ape-checkbox"
                      type="checkbox"
                      name="vehicle"
                      value="audi"
                      id="checkbox4"
                    />
                  </td>
                  <td>
                    <input
                      class="ape-checkbox"
                      type="checkbox"
                      name="vehicle"
                      value="audi"
                      id="checkbox4"
                    />
                  </td>
                  <td>
                    <input
                      class="ape-input"
                      type="text"
                      v-module="outputPath"
                      placeholder="请输入"
                    />
                  </td>
                  <td>
                    <input
                      class="ape-input"
                      type="text"
                      v-module="outputPath"
                      placeholder="请输入"
                    />
                  </td>
                  <td>utf8</td>
                  <td>utf8_general_ci</td>
                  <td>
                    <button class="ape-button" type="button" s-type="error">
                      删除
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>
<script>
  let data = {
    b: "",
    outputPath: "",
    table: {
      filed: "",
    },
  };
</script>

<script>
  function twoWay() {
    let inputs = document.getElementsByClassName("ape-input");
    for (let i = 0; i < inputs.length; i++) {
      let input = inputs[i];
      let vModule = input.attributes["v-module"].value;
      input.value = data[vModule];
      input.addEventListener("input", () => {
        setData(data, vModule, input.value);
        console.log(data);
      });
    }
    function setData(data, key, value) {
      const keys = key.split(".");
      let currentObj = data;

      for (let i = 0; i < keys.length - 1; i++) {
        const currentKey = keys[i];
        if (
          !currentObj[currentKey] ||
          typeof currentObj[currentKey] !== "object"
        ) {
          if (keys[i + 1] && !isNaN(keys[i + 1])) {
            currentObj[currentKey] = [];
          } else {
            currentObj[currentKey] = {};
          }
        }
        currentObj = currentObj[currentKey];
      }

      const lastKey = keys[keys.length - 1];
      currentObj[lastKey] = value;
    }
  }

  function apeFormItem() {
    let apeFormItems = document.getElementsByClassName("ape-form-item");
    for (let i = 0; i < apeFormItems.length; i++) {
      let apeFormItem = apeFormItems[i];
      let width = apeFormItem.attributes.width || {};
      apeFormItem.style.setProperty("--width", width.value);
    }
  }

  twoWay();
  apeFormItem();
</script>

<style>
  html,
  body {
    padding: 0;
    margin: 0;
  }

  .ape-container {
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .ape-header {
    padding: 10px;
    width: 100%;
    min-height: 60px;
    border-bottom: 1px solid #efefef;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
  }

  .ape-body {
    padding: 10px;
    width: 100%;
    flex: 1;
    box-sizing: border-box;
  }

  .ape-body .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #313131;
    font-weight: bold;
  }

  .ape-body .form {
    margin: auto;
    width: fit-content;
    min-width: 1500px;
  }

  .ape-body .outside {
    width: 100%;
    border-collapse: collapse;
  }

  .ape-body .outside thead {
    background: #9de5ff;
    border-bottom: 1px solid #00bbff;
  }

  .ape-body .outside thead th {
    padding: 5px;
    height: 40px;
    text-align: center;
    font-size: 14px;
    color: #313131;
    box-sizing: border-box;
  }

  .ape-body .outside thead th:nth-child(1) {
    width: 120px;
  }

  .ape-body .outside thead th:nth-child(2),
  .ape-body .outside thead th:nth-child(3),
  .ape-body .outside thead th:nth-child(4) {
    width: 100px;
  }

  .ape-body .outside thead th:nth-child(5),
  .ape-body .outside thead th:nth-child(6) {
    width: 60px;
  }

  .ape-body .outside thead th:nth-child(7),
  .ape-body .outside thead th:nth-child(8),
  .ape-body .outside thead th:nth-child(9),
  .ape-body .outside thead th:nth-child(10) {
    width: 150px;
  }

  .ape-body .outside thead th:nth-child(9),
  .ape-body .outside thead th:nth-child(10) {
    width: 100px;
  }

  .ape-body .outside thead th:nth-child(11) {
    width: 60px;
  }

  .ape-body .outside tbody {
    background: #d5fdff;
  }

  .ape-body .outside tbody tr {
    height: 40px;
  }

  .ape-body .outside tbody tr td {
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    color: #515151;
    font-size: 14px;
    font-weight: bold;
  }
</style>

<style>
  .ape-input {
    padding: 5px 10px;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    outline: none;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
    transition: border 0.2s;
  }

  .ape-input:hover {
    border: 1px solid #d3d3d3;
  }

  .ape-input:focus {
    border: 1px solid #6eb6ff;
  }

  .ape-input[disabled] {
    cursor: not-allowed;
    background: #f7f7f7;
  }

  .ape-checkbox {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .ape-form {
    padding: 10px;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
  }

  .ape-form-item {
    padding: 5px;
    width: 100%;
    min-width: 300px;
    height: fit-content;
    min-height: 30px;
    box-sizing: border-box;
  }

  .ape-form-item[label] {
    padding-left: 50px;
    position: relative;
  }

  .ape-form-item[width] {
    padding-left: calc(20px + var(--width));
    position: relative;
  }

  .ape-form-item[label]::before {
    padding: 10px;
    position: absolute;
    left: 0;
    top: 0;
    content: attr(label);
    width: calc(20px + var(--width));
    height: 100%;
    font-size: 14px;
    color: #515151;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .ape-button {
    margin: 0;
    padding: 0 10px;
    width: fit-content;
    min-width: 80px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
    background: #ffffff;
    color: #313131;
    font-size: 14px;
    transition: all 0.2s;
    cursor: pointer;
    outline: none;
    font-family: inherit;
  }

  .ape-button:hover {
    border: 1px solid #8ad0ff;
    background: #caeaff;
    color: #0099ff;
  }

  .ape-button:active {
    border: 1px solid #24a7ff;
    background: #caeaff;
    color: #0099ff;
  }

  .ape-button[s-type="error"] {
    border: 1px solid #ffdada;
    background: #ffffff;
    color: #313131;
  }

  .ape-button[s-type="error"]:hover {
    border: 1px solid #ff9999;
    background: #ffd6d6;
    color: #ff5500;
  }

  .ape-button[s-type="error"]:active {
    border: 1px solid #ff5500;
    background: #ffd6d6;
    color: #ff5500;
  }
</style>
